<template>
	<div class="progress-cell">
		<ElProgress
			:percentage="row.progress || 0"
			:color="progressColor(row.progress)" />
	</div>
</template>

<script setup lang="ts">
type PropsType = {
	row: {
		progress: number;
	}
};

const props = withDefaults<PropsType>(defineProps<PropsType>(), {
	row: {
		progress: 0
	}
});

const progressColor = computed(() => {
	return val => {
		if (val >= 100) {
			return "#409EFF";
		} else if (val >= 80) {
			return "#67C23A";
		} else if (val >= 60) {
			return "#E6A23C";
		} else {
			return "#F56C6C";
		}
	};
});
</script>

<style scoped lang="scss">
.user-info {
    display: flex;
    align-items: center;
    gap: 12px;

    .user-details {
        .primary-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 4px;

            .username {
                font-weight: 500;
                color: var(--el-text-color-primary);
            }
        }

        .secondary-info {
            font-size: 13px;
            color: var(--el-text-color-secondary);
        }
    }
}
</style>
